<!DOCTYPE html>
<html
        layout:decorator="component/mainLayout"
        xmlns="http://www.w3.org/1999/xhtml"
        xmlns:th="http://www.thymeleaf.org"
        lang="en" xmlns:layout="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css" media="all"/>
    <script src="/layui/layui.js" charset="utf-8"></script>
</head>

<body layout:fragment="contentCenter">
    <table id="cargoTableId" lay-filter="tableFilter"></table>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <script type="text/html" id="toolbarDemo">
        <button class="layui-btn layui-btn-normal" lay-event="deliver" id="deliverGood-btn"><i class="layui-icon">&#xe608;</i>上货</button>
        <!--<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="binding">删除</a>-->
    </script>
    <!--<script type="text/html" id="toolbarDemo">-->
        <!--<button class="layui-btn layui-btn-normal" lay-event="deliver" id="deliverGood-btn"><i class="layui-icon">&#xe608;</i>上货</button>-->
    <!--</script>-->
    <style>
        .laytable-cell-1-0-5{
            height: 100% !important;
        }
    </style>
<script>
    $(document).ready(function () {
        sliderCollapse.open('#cargoCollapse');
    })

    var parentLayui = layui.use(['table','jquery','element','form','layer'], function(){
        var table = layui.table
            , $ = layui.jquery
            , layer = layui.layer
            , form = layui.form
            , element = layui.element;
        table.render({
            elem: '#cargoTableId'
            ,url:'/cargoManager/getAllCargo'
            // ,toolbar: '#toolbarDemo'
            ,toolbar: 'true'
            ,defaultToolbar: ['filter', 'print', 'exports']
            ,cellMinWidth: 200 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,title: '货物数据表'
            ,limit:20
            ,totalRow:true
            ,cols: [        //  "[["需要将两个括号拆开换行，因为[[…]]之间的表达式在Thymeleaf被认为是内联表达式
                [
                    {type: 'checkbox',},
                    {field:'cargoId', title:'商品ID', width:110, unresize: true,align:'center'}
                    ,{field:'cargoName', title:'商品名', width:200,align:'center'}
                    ,{field:'cargoPrice', title:'原价(元)', width:100,sort: true,align:'center'}
                    ,{field:'cargoRetailPrice', title:'售价(元)', width:100,sort: true,align:'center'}
                    ,{field:'cargoUrl', title:'图片', width:200, align:'center',templet: function(res){
                        // console.log(res);
                        return '<img src="'+res.cargoUrl+'"></img>';
                        // return '<img src="'+JSON.parse(JSON.parse(JSON.stringify(res)).photo_url)[0].url+'"></img>';
                    }}
                    ,{field:'cargoNum', title:'总库存', width:120,sort: true,align:'center'}
                    // ,{field:'spu_code', title:'SPU_Code', width:200,align:'center'}
                    // ,{field:'spu_no', title:'SPU_No',width:200,align:'center'}
                    // ,{field:'unit', title:'单位', width:80, sort: true,align:'center'}
                    ,{field:'createDatetime', title:'创建时间', width:200,sort: true,align:'center'}
                    // ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150,align:'center'}
                    ,{ align:'center',title:'操作', toolbar: '#barDemo',unresize:true}
                ]]
            ,page: true,id:'cargoTableId',
            // parseData:function (res) {
            //     return  {
            //         "code": res.status, //解析接口状态
            //         "msg": res.message, //解析提示文本
            //         "count": res.data.spus.length, //解析数据长度
            //         "data": res.data.spus //解析数据列表
            //     }
            // }
        });

        //监听行工具事件
        table.on('tool(tableFilter)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'detail') {
                layer.open({
                    type : 2,
                    title : "商品查看",
                    // area : [ 500, ($(window).height()) + 'px' ],
                    area: ['500px', '600px'],
                    shade : 0,
                    offset : 'rb',
                    scrollbar : false,
                    shade : 0.5,
                    shift : 2,
                    fixed : false,
                    resize : false,
                    scrollbar : true,
                    shadeClose : true,
                    move : false,
                    maxmin : false,
                    content : '/admin/cargoDetail?cargoUrl='+data.cargoUrl+'&cargoNum='+data.cargoNum+'&cargoId='+data.cargoId
                    +'&cargoName='+data.cargoName+'&cargoPrice='+data.cargoPrice+'&cargoRetailPrice='+data.cargoRetailPrice+'&expireTime='+data.expireTime
                        +'&isUpdate=0',
                    zIndex : layer.zIndex //重点1
                    ,
                    success : function(layero) {
                        layer.setTop(layero); //重点2
                    }
                });
            } else if (layEvent === 'del') {
                layer.confirm('真的删除该商品么？', {icon:0},function (index) {
                    $.ajax({
                        type:"post",
                        url:'/cargoManager/delCargo',
                        data:{cargoId:data.cargoId},
                        success:function (res) {
                            if(res.status == 200){
                                obj.del(); //删除对应行（tr）的DOM结构
                                layer.close(index);
                            }
                        },
                        error:function (error) {
                            alert(error);
                        }
                    })
                    //向服务端发送删除指令
                });
            } else if (layEvent === 'edit') {
                layer.open({
                    type : 2,
                    title : "商品编辑",
                    // area : [ '1020px', ($(window).height()) + 'px' ],
                    area: ['500px', '600px'],
                    shade : 0,
                    offset : 'rb',
                    scrollbar : false,
                    shade : 0.5,
                    shift : 2,
                    fixed : false,
                    resize : false,
                    scrollbar : true,
                    shadeClose : true,
                    move : false,
                    maxmin : false,
                    content : '/admin/cargoDetail?cargoUrl='+data.cargoUrl+'&cargoNum='+data.cargoNum+'&cargoId='+data.cargoId
                        +'&cargoName='+data.cargoName+'&cargoPrice='+data.cargoPrice+'&cargoRetailPrice='+data.cargoRetailPrice+'&expireTime='+data.expireTime
                        +'&isUpdate=1',
                    zIndex : layer.zIndex //重点1
                    ,
                    success : function(layero) {
                        layer.setTop(layero); //重点2
                    }
                });
            }
        })

    })

</script>
</body>
</html>